<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="60%">
        <div>
            <el-checkbox-group v-model="checkList">
                <div v-for="(item, index) in mainCategoryList" :key="index" style="display:inline-block;width:120px;height:140px;">
                    <div style="display:flex;flex-direction:column;align-items:center;">
                        <img style="width:64px;height:64px;" :src="item.src"/>
                        <el-checkbox :label="item.IMP+' '+item.number" :value="item.id+''"/>
                        <div style="height:20px;color:000000;font-size:14px;padding-top:10px;">{{item.text}}</div>
                    </div>
                </div>
            </el-checkbox-group>
        </div>
      
    <template #footer>
      <el-button @click="submitForm()" type="primary">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">

//危险品图标
	import img1 from '@/assets/image/1.png'
	import img2 from '@/assets/image/2.png'
	import img3 from '@/assets/image/3.png'
	import img4 from '@/assets/image/4.png'
	import img5 from '@/assets/image/5.png'
	import img6 from '@/assets/image/6.png'
	import img7 from '@/assets/image/7.png'
	import img8 from '@/assets/image/8.png'
	import img9 from '@/assets/image/9.png'
	import img10 from '@/assets/image/10.png'
	import img11 from '@/assets/image/11.png'
	import img12 from '@/assets/image/12.png'
	import img13 from '@/assets/image/13.png'
	import img14 from '@/assets/image/14.png'
	import img15 from '@/assets/image/15.png'
	import img16 from '@/assets/image/16.png'
	import img17 from '@/assets/image/17.png'
	import img18 from '@/assets/image/18.png'
	import img19 from '@/assets/image/19.png'
	import img20 from '@/assets/image/20.png'
	import img21 from '@/assets/image/21.png'
	import img22 from '@/assets/image/22.png'

/** 货物资料 表单 */
defineOptions({ name: 'MainCategory' })

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const checkList = ref<string[]>([]);
const mainCategoryList= ref([
					{
						id: 1,
						IMP: 'RFG',
						number: '2.1',
						text: '易燃气体',
						src: img1
					},
					{
						id: 2,
						IMP: 'RNG',
						number: '2.2',
						text: '非易燃，无毒气体',
						src: img2
					},
					{
						id: 3,
						IMP: 'RPG',
						number: '2.3',
						text: '毒性气体',
						src: img3
					},
					{
						id: 4,
						IMP: 'RFL',
						number: '3',
						text: '易燃液体',
						src: img4
					},
					{
						id: 5,
						IMP: 'RFS',
						number: '4.1',
						text: '易燃固体',
						src: img5
					},
					{
						id: 6,
						IMP: 'RSC',
						number: '4.2',
						text: '自燃物质',
						src: img6
					},
					{
						id: 7,
						IMP: 'RFW',
						number: '4.3',
						text: '遇湿危险的物质',
						src: img7
					},
					{
						id: 8,
						IMP: 'ROX',
						number: '5.1',
						text: '氧化剂',
						src: img8
					},
					{
						id: 9,
						IMP: 'ROP',
						number: '5.2',
						text: '有机过氧化物',
						src: img9
					},
					{
						id: 10,
						IMP: 'RPB',
						number: '6.1',
						text: '毒性物质',
						src: img10
					},
					{
						id: 11,
						IMP: 'RIS',
						number: '6.2',
						text: '感染性物质',
						src: img11
					},
					{
						id: 12,
						IMP: 'RDS',
						number: '6.2',
						text: '生物物质,B级',
						src: img12
					},
					{
						id: 13,
						IMP: 'RCM',
						number: '8',
						text: '腐蚀性物质',
						src: img13
					},
					{
						id: 14,
						IMP: 'RMD',
						number: '9',
						text: '杂项危险品',
						src: img14
					},
					{
						id: 15,
						IMP: 'ICE',
						number: '9',
						text: '干冰',
						src: img15
					},
					{
						id: 16,
						IMP: 'MAG',
						number: '9',
						text: '磁性物质',
						src: img16
					},
					{
						id: 17,
						IMP: 'EHS',
						number: '',
						text: '环境危害物质',
						src: img17
					},
					{
						id: 18,
						IMP: 'LQM',
						number: '',
						text: '有限数量',
						src: img18
					},
					{
						id: 19,
						IMP: 'RRW',
						number: '7',
						text: '放射性物质I级-白',
						src: img19
					},
					{
						id: 20,
						IMP: 'RRY',
						number: '7',
						text: '放射性物质II级-黄',
						src: img20
					},
					{
						id: 21,
						IMP: 'RRY',
						number: '7',
						text: '放射性物质III级-黄',
						src: img21
					},
					// {
					// 	id: 22,
					// 	IMP: '',
					// 	number: '',
					// 	text: '',
					// 	src: img22
					// },
				]);

/** 打开弹窗 */
const open = async (mainCategoryCode:string) => {
	if(!mainCategoryCode){
		checkList.value = []
	}else{
		checkList.value = mainCategoryCode.split(",")
	}
  
  dialogVisible.value = true
  dialogTitle.value = '类别代码选择'
}

const findMainCateGory = (mainCategoryCode:string)=>{
    let ids:String[] = [];
	if(!mainCategoryCode){
		ids = []
	}else{
		ids = mainCategoryCode.split(",")
	}
    let arr:any[] = [];
    for(let i = 0; i < mainCategoryList.value.length; i++){
        let data = mainCategoryList.value[i];
        let id = data.id + ""
        if(ids.indexOf(id) > -1){
            arr.push(data);
        }
    }
    return arr;
}
defineExpose({ open, findMainCateGory }) // 提供 open 方法，用于打开弹窗

const emit = defineEmits(["success"])
const submitForm = ()=>{
	console.log(checkList.value)
    emit("success", checkList.value.join(","));
    dialogVisible.value = false
}

</script>
